<template>
  <div class="app-container home">
    <el-card>
      <div
        slot="header"
        class="clearfix"
        style="display: flex; align-items: center"
      >
        <span>病种分布</span>
        <div style="flex: 1"></div>
        <el-radio-group
          style="float: right; padding: 3px 0"
          @change="getBzfbData"
          v-model="bzfbRadio"
          size="small"
        >
          <el-radio-button label="0">周</el-radio-button>
          <el-radio-button label="1">月</el-radio-button>
          <el-radio-button label="2">季</el-radio-button>
          <el-radio-button label="3">年</el-radio-button>
        </el-radio-group>
        <el-date-picker
          v-model="bzfbTime"
          @change="getBzfbData"
          type="daterange"
          range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="small"
        >
        </el-date-picker>
      </div>
      <div
        style="display: flex; justify-content: space-between; flex-wrap: wrap"
      >
        <EchartsItem
          title=""
          :row="1"
          echartId="options-7"
          ref="options7"
          :optionsArr="options7"
        >
          <!-- <el-radio-group v-model="radio2" size="small">
            <el-radio-button label="周"></el-radio-button>
            <el-radio-button label="月"></el-radio-button>
            <el-radio-button label="季"></el-radio-button>
            <el-radio-button label="年"></el-radio-button>
          </el-radio-group> -->
        </EchartsItem>
        <!-- <EchartsItem title="门急诊诊断TOP10分布" :row="1" echartId="options-8" ref="options8" :optionsArr="options8">
        </EchartsItem> -->
        <EchartsItem
          title="住院诊断TOP10分布"
          :row="1"
          echartId="options-9"
          ref="options9"
          :optionsArr="options9"
        >
        </EchartsItem>
      </div>
    </el-card>
    <el-card style="margin-top: 28px">
      <div
        slot="header"
        class="clearfix"
        style="display: flex; align-items: center"
      >
        <span>人口统计学分布</span>
        <div style="flex: 1"></div>
        <el-radio-group
          style="float: right; padding: 3px 0"
          @change="getRkxData"
          v-model="rkxRadio"
          size="small"
        >
          <el-radio-button label="0">周</el-radio-button>
          <el-radio-button label="1">月</el-radio-button>
          <el-radio-button label="2">季</el-radio-button>
          <el-radio-button label="3">年</el-radio-button>
        </el-radio-group>
        <el-date-picker
          v-model="rkxTime"
          @change="getRkxData"
          type="daterange"
          range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="small"
        >
        </el-date-picker>
      </div>
      <div
        style="display: flex; justify-content: space-between; flex-wrap: wrap"
      >
        <EchartsItemDetails
          title=""
          :row="3"
          ref="options1"
          :option="options1"
          echartId="index-1"
        />
        <EchartsItemDetails
          title=""
          :row="1.5"
          ref="options2"
          :option="options2"
          echartId="index-2"
        />
        <EchartsItemDetails
          title=""
          :row="3"
          ref="options3"
          :option="options3"
          echartId="index-3"
        />
        <EchartsItemDetails
          title=""
          :row="1.5"
          ref="options4"
          :option="options4"
          echartId="index-4"
        />
        <EchartsItemDetails
          title=""
          :row="3"
          ref="options5"
          :option="options5"
          echartId="index-5"
        />
        <EchartsItemDetails
          title=""
          :row="1.5"
          ref="options6"
          :option="options6"
          echartId="index-6"
        />
      </div>
    </el-card>
    <el-card>
      <div
        slot="header"
        class="clearfix"
        style="display: flex; align-items: center"
      >
        <span>门急诊诊断TOP10分布</span>
        <div style="flex: 1"></div>
        <el-radio-group
          style="float: right; padding: 3px 0"
          @change="getBzfbData1"
          v-model="bzfbRadio"
          size="small"
        >
          <el-radio-button label="0">周</el-radio-button>
          <el-radio-button label="1">月</el-radio-button>
          <el-radio-button label="2">季</el-radio-button>
          <el-radio-button label="3">年</el-radio-button>
        </el-radio-group>
        <el-date-picker
          v-model="bzfbTime"
          @change="getBzfbData1"
          type="daterange"
          range-separator="至"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="small"
        >
        </el-date-picker>
      </div>
      <div
        style="display: flex; justify-content: space-between; flex-wrap: wrap"
      >
        <EchartsItem
          title=""
          :row="1"
          echartId="options-8"
          ref="options8"
          :optionsArr="options8"
        >
        </EchartsItem>
      </div>
    </el-card>

    <!-- <EchartsItem title="卒中筛查病例统计" :row="2" echartId="index-2">
      <el-radio-group v-model="radio2" size="small">
        <el-radio-button label="近一周"></el-radio-button>
        <el-radio-button label="近一月"></el-radio-button>
        <el-radio-button label="近90天"></el-radio-button>
        <el-radio-button label="近一年"></el-radio-button>
      </el-radio-group>
    </EchartsItem>
    <EchartsItem title="卒中急救病例统计" :row="2" echartId="index-3">
      <el-radio-group v-model="radio2" size="small">
        <el-radio-button label="近一周"></el-radio-button>
        <el-radio-button label="近一月"></el-radio-button>
        <el-radio-button label="近90天"></el-radio-button>
        <el-radio-button label="近一年"></el-radio-button>
      </el-radio-group>
    </EchartsItem>
    <EchartsItem title="卒中住院治疗病例统计" :row="2" echartId="index-4">
      <el-radio-group v-model="radio2" size="small">
        <el-radio-button label="近一周"></el-radio-button>
        <el-radio-button label="近一月"></el-radio-button>
        <el-radio-button label="近90天"></el-radio-button>
        <el-radio-button label="近一年"></el-radio-button>
      </el-radio-group>
    </EchartsItem>
    <EchartsItem title="卒中康复床旁康复人数统计" :row="2" echartId="index-5">
      <el-radio-group v-model="radio2" size="small">
        <el-radio-button label="近一周"></el-radio-button>
        <el-radio-button label="近一月"></el-radio-button>
        <el-radio-button label="近90天"></el-radio-button>
        <el-radio-button label="近一年"></el-radio-button>
      </el-radio-group>
    </EchartsItem>
    <EchartsItem title="病种信息数据统计" :row="2" echartId="index-6">
      <el-radio-group v-model="radio2" size="small">
        <el-radio-button label="近一周"></el-radio-button>
        <el-radio-button label="近一月"></el-radio-button>
        <el-radio-button label="近90天"></el-radio-button>
        <el-radio-button label="近一年"></el-radio-button>
      </el-radio-group>
    </EchartsItem> -->
  </div>
</template>

<script>
import {
  queryBltj,
  queryXbtj,
  queryNlfb,
  queryNlfbList,
  queryBzfb,
  queryMjzzdfbTop10,
  queryZyzdTop10,
} from "@/api/index";
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.7",
      radio2: "月",
      rkxRadio: "0",
      rkxTime: [],
      bzfbRadio: "0",
      bzfbTime: [],
      options1: {
        title: {
          text: "病例统计",
          left: "left",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "0",
          right: "0",
        },
        graphic: [
          {
            //环形图中间添加文字
            type: "text", //通过不同top值可以设置上下显示
            left: "center",
            top: "58%",
            style: {
              text: `${0}\n患者总数`,
              textAlign: "center",
              fill: "#333", //文字的颜色
              fontSize: 16,
              lineHeight: 20,
            },
          },
        ],
        series: [
          {
            name: "病例统计",
            type: "pie",
            top: "30%",
            // radius: "80%",
            radius: ["60%", "80%"],
            data: [
              {
                value: 0,
                name: "门急诊脑卒中患者数",
              },
              {
                value: 0,
                name: "住院脑卒中患者数",
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
      options2: {
        title: {
          text: "数据对比",
          left: "left",
        },
        tooltip: {},
        grid: {
          top: "40px",
          right: "40px",
          bottom: "20px",
          left: "40px",
        },
        legend: {
          top: "0",
          right: "0",
          data: ["门急诊脑卒中患者数", "住院脑卒中患者数"],
        },
        xAxis: {
          data: [],
        },
        yAxis: {},
        series: [
          {
            name: "门急诊脑卒中患者数",
            barWidth: 20,
            data: [],
            type: "bar",
          },
          {
            name: "住院脑卒中患者数",
            barWidth: 20,
            data: [],
            type: "bar",
          },
        ],
      },
      options3: {
        title: {
          text: "性别分布",
          left: "left",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "0",
          right: "0",
        },
        graphic: [
          {
            //环形图中间添加文字
            type: "text", //通过不同top值可以设置上下显示
            left: "center",
            top: "58%",
            style: {
              text: `${0}\n患者总数`,
              textAlign: "center",
              fill: "#333", //文字的颜色
              fontSize: 16,
              lineHeight: 20,
            },
          },
        ],
        series: [
          {
            name: "性别分布",
            type: "pie",
            top: "30%",
            // radius: "80%",
            radius: ["60%", "80%"],
            data: [
              {
                value: 0,
                name: "男性",
              },
              {
                value: 0,
                name: "女性",
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
      options4: {
        title: {
          text: "数据对比",
          left: "left",
        },
        tooltip: {},
        grid: {
          top: "40px",
          right: "40px",
          bottom: "20px",
          left: "40px",
        },
        legend: {
          top: "0",
          right: "0",
          data: ["男性", "女性"],
        },
        xAxis: {
          data: [],
        },
        yAxis: {},
        series: [
          {
            name: "男性",
            barWidth: 20,
            data: [],
            type: "bar",
          },
          {
            name: "女性",
            barWidth: 20,
            data: [],
            type: "bar",
          },
        ],
      },
      options5: {
        //年龄段分布
        title: {
          text: "年龄段分布",
          left: "left",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical", //垂直显示
          y: "center", //延Y轴居中
          x: "80%", //居右显示
        },
        graphic: [
          {
            //环形图中间添加文字
            type: "text", //通过不同top值可以设置上下显示
            left: "32%",
            top: "48%",
            style: {
              text: `${0}\n患者总数`,
              textAlign: "center",
              fill: "#333", //文字的颜色
              fontSize: 16,
              lineHeight: 20,
            },
          },
        ],
        series: [
          {
            name: "年龄段分布",
            type: "pie",
            left: "-20%",
            top: "10%",
            // radius: "80%",
            radius: ["40%", "60%"],
            data: [
              {
                value: 0,
                name: "0~19",
              },
              {
                value: 0,
                name: "20~39",
              },
              {
                value: 0,
                name: "40~59",
              },
              {
                value: 0,
                name: "60~79",
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
      options6: {
        title: {
          text: "数据对比",
          left: "left",
        },
        tooltip: {},
        grid: {
          top: "40px",
          right: "40px",
          bottom: "20px",
          left: "40px",
        },
        legend: {
          top: "0",
          right: "0",
        },
        xAxis: {
          data: [],
        },
        yAxis: {},
        series: [
          {
            name: "0~19",
            barWidth: 20,
            data: [],
            type: "bar",
          },
          {
            name: "20~39",
            barWidth: 20,
            data: [],
            type: "bar",
          },
          {
            name: "40~59",
            barWidth: 20,
            data: [],
            type: "bar",
          },
          {
            name: "60~79",
            barWidth: 20,
            data: [],
            type: "bar",
          },
        ],
      },
      options7: [
        {
          title: {
            text: "",
            left: "center",
          },
          tooltip: {
            trigger: "item",
            show: false,
          },
          legend: {
            // orient: "vertical",
            left: "center",
          },
          series: [
            {
              name: "病种分布",
              type: "pie",
              radius: "50%",
              label: {
                formatter: "{value|{d}}%\n{name|{b}}",
                alignTo: "labelLine",
                minMargin: 5,
                rich: {
                  name: {
                    color: "#8C939E",
                    fontSize: 12,
                    lineHeight: 20,
                  },
                  value: {
                    color: "#4C5058",
                    fontSize: 18,
                    fontWeight: "bold",
                  },
                },
              },
              itemStyle: {
                borderColor: "#fff",
                borderWidth: 2,
              },
              data: [
                {
                  value: 0,
                  name: "AIS静脉溶栓",
                },
                {
                  value: 0,
                  name: "AIS介入再通",
                },
                {
                  value: 0,
                  name: "脑出血",
                },
                {
                  value: 0,
                  name: "颅内动脉瘤",
                },
                {
                  value: 0,
                  name: "CEA",
                },
                {
                  value: 0,
                  name: "CAS",
                },
              ],
            },
          ],
        },
        // {
        //   xAxis: {
        //     type: "category",
        //     data: [
        //       "2024-06",
        //       "2024-07",
        //       "2024-08",
        //       "2024-09",
        //       "2024-10",
        //       "2024-11",
        //       "2024-12",
        //     ],
        //   },
        //   yAxis: {
        //     type: "value",
        //   },
        //   series: [{
        //       data: [620, 732, 801, 934, 1090, 1130, 1220],
        //       type: "line",
        //       smooth: true,
        //     },
        //     {
        //       data: [932, 901, 934, 1290, 1330, 1320, 820],
        //       type: "line",
        //       smooth: true,
        //     },
        //     {
        //       data: [401, 534, 990, 1130, 1020, 720, 932],
        //       type: "line",
        //       smooth: true,
        //     },
        //     {
        //       data: [934, 1290, 1330, 1320, 820, 932, 901],
        //       type: "line",
        //       smooth: true,
        //     },
        //     {
        //       data: [1290, 1330, 1320, 820, 932, 901, 934],
        //       type: "line",
        //       smooth: true,
        //     },
        //     {
        //       data: [1330, 1320, 820, 932, 901, 934, 1290],
        //       type: "line",
        //       smooth: true,
        //     },
        //     {
        //       data: [1320, 820, 932, 901, 934, 1290, 1330],
        //       type: "line",
        //       smooth: true,
        //     },
        //   ],
        // },
      ],
      options8: [
        {
          dataset: {
            source: [],
          },
          grid: {
            containLabel: true,
          },
          xAxis: {
            name: "人数",
            minInterval: 1,
          },
          yAxis: {
            type: "category",
          },
          visualMap: {
            show: false,
            min: 0,
            max: 100,
            dimension: 0,
            inRange: {
              color: ["#65B581", "#FFCE34", "#FD665F"],
            },
          },
          series: [
            {
              type: "bar",
              encode: {
                // Map the "amount" column to X axis.
                x: "amount",
                // Map the "product" column to Y axis
                y: "product",
              },
            },
          ],
        },
      ],
      options9: [
        {
          dataset: {
            source: [],
          },
          grid: {
            containLabel: true,
          },
          xAxis: {
            name: "人数",
            minInterval: 1,
          },
          yAxis: {
            type: "category",
          },
          visualMap: {
            show: false,
            orient: "horizontal",
            left: "center",
            min: 0,
            max: 100,
            text: ["High Score", "Low Score"],
            // Map the score column to color
            dimension: 0,
            inRange: {
              color: ["#65B581", "#F5686B", "#F72F5C"],
            },
          },
          series: [
            {
              type: "bar",
              encode: {
                // Map the "amount" column to X axis.
                x: "amount",
                // Map the "product" column to Y axis
                y: "product",
              },
            },
          ],
        },
      ],
    };
  },
  created() {
    this.getRkxData();
    this.getBzfbData();
    this.getBzfbData1();
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    getRkxData() {
      const param = {
        endTime: this.rkxTime && this.rkxTime.length ? this.rkxTime[0] : "",
        startTime: this.rkxTime && this.rkxTime.length ? this.rkxTime[1] : "",
        timeType: this.rkxRadio,
      };
      queryBltj(param).then((res) => {
        const data = [...res.data];
        let mjznczhzs = 0; // 门急诊脑卒中患者数
        let zynczhzs = 0; // 住院脑卒中患者数
        let total = 0; // 患者总数
        if (data && data.length) {
          for (let i = 0; i < data.length; i++) {
            mjznczhzs += data[i].mjznczhzs;
            zynczhzs += data[i].zynczhzs;
            total += data[i].total;
          }
          // options2
          // 门急诊脑卒中患者数
          this.options2.series[0].data = data.map((item) => {
            return item.mjznczhzs;
          });
          // 住院脑卒中患者数
          this.options2.series[1].data = data.map((item) => {
            return item.zynczhzs;
          });
          this.options2.xAxis.data = data.map((item) => {
            return item.date.split(" ")[0];
          });
          this.$refs.options2.updateChart();
        }
        // options1
        this.options1.series[0].data[0].value = mjznczhzs;
        this.options1.series[0].data[1].value = zynczhzs;
        this.options1.graphic[0].style.text = `${total}\n患者总数`;
        this.$refs.options1.updateChart();
      });
      queryXbtj(param).then((res) => {
        const data = [...res.data];
        let mjznczhzs = 0; // 男性
        let zynczhzs = 0; // 女性
        let total = 0; // 患者总数
        if (data && data.length) {
          for (let i = 0; i < data.length; i++) {
            mjznczhzs += data[i].mjznczhzs;
            zynczhzs += data[i].zynczhzs;
            total += data[i].total;
          }
          // options4
          // 男性
          this.options4.series[0].data = data.map((item) => {
            return item.mjznczhzs;
          });
          // 女性
          this.options4.series[1].data = data.map((item) => {
            return item.zynczhzs;
          });
          this.options4.xAxis.data = data.map((item) => {
            return item.date.split(" ")[0];
          });
          this.$refs.options4.updateChart();
        }
        this.options3.series[0].data[0].value = mjznczhzs;
        this.options3.series[0].data[1].value = zynczhzs;
        this.options3.graphic[0].style.text = `${total}\n患者总数`;
        this.$refs.options3.updateChart();
      });
      queryNlfb(param).then((res) => {
        const data = {
          ...res.data,
        };
        this.options5.series[0].data[0].value = data.num1;
        this.options5.series[0].data[1].value = data.num2;
        this.options5.series[0].data[2].value = data.num3;
        this.options5.series[0].data[3].value = data.num4;
        this.options5.graphic[0].style.text = `${data.total}\n患者总数`;
        this.$refs.options5.updateChart();
      });
      queryNlfbList(param).then((res) => {
        const data = [...res.data];
        let num1 = 0; // 0-19
        let num2 = 0; // 20-39
        let num3 = 0; // 40-59
        let num4 = 0; // 60-79
        let total = 0; // 患者总数

        if (data && data.length) {
          for (let i = 0; i < data.length; i++) {
            num1 += data.num1;
            num2 += data.num2;
            num3 += data.num3;
            num4 += data.num4;
            total += data.total;
          }
          // options6
          // 0-19
          this.options6.series[0].data = data.map((item) => {
            return item.num1;
          });
          // 20-39
          this.options6.series[1].data = data.map((item) => {
            return item.num2;
          });
          // 40-59
          this.options6.series[2].data = data.map((item) => {
            return item.num3;
          });
          // 60-79
          this.options6.series[3].data = data.map((item) => {
            return item.num4;
          });
          this.options6.xAxis.data = data.map((item) => {
            return item.date.split(" ")[0];
          });
          this.$refs.options6.updateChart();
        }
      });
    },
    getBzfbData() {
      const param = {
        endTime: this.bzfbTime && this.bzfbTime.length ? this.bzfbTime[0] : "",
        startTime:
          this.bzfbTime && this.bzfbTime.length ? this.bzfbTime[1] : "",
        timeType: this.bzfbRadio,
      };
      queryBzfb(param).then((res) => {
        const data = {
          ...res.data,
        };
        let cas = 0; // cas
        let cea = 0; // cea
        let jmrs = 0; // 静脉溶栓
        let jrzt = 0; // 介入再通
        let lndml = 0; // 颅内动脉瘤
        let ncx = 0; // 	脑出血
        // if (data && data.length) {
        if (data) {
          // for (let i = 0; i < data.length; i++) {
          cas = data.cas;
          cea = data.cea;
          jmrs = data.jmrs;
          jrzt = data.jrzt;
          lndml = data.lndml;
          ncx = data.ncx;
          // }
        }
        this.options7[0].series[0].data[0].value = jmrs;
        this.options7[0].series[0].data[1].value = jrzt;
        this.options7[0].series[0].data[2].value = ncx;
        this.options7[0].series[0].data[3].value = lndml;
        this.options7[0].series[0].data[4].value = cea;
        this.options7[0].series[0].data[5].value = cas;
        this.$refs.options7.updateChart();
      });
      queryZyzdTop10(param).then((res) => {
        const data = {
          ...res.data,
        };
        let arr = [];
        let colorS = [
          29.3, 10.3, 27.1, 34.4, 70.1, 69.7, 48.1, 70.6, 62.7, 89.6,
        ];
        for (let key in data) {
          const item = {
            name: this.getNameByKey(key),
            value: data[key],
          };
          arr.push(item);
        }
        const newArr = arr.sort((a, b) => a.value - b.value);
        for (let i = 0; i < newArr.length; i++) {
          newArr[i].color = colorS[i];
        }
        setTimeout(() => {
          this.options9[0].dataset.source = [
            ["score", "amount", "product"],
            ...newArr.map((item) => {
              return [item.color, item.value, item.name];
            }),
          ];
          this.$refs.options9.updateChart();
        });
      });
    },
    getBzfbData1() {
      const param = {
        endTime: this.bzfbTime && this.bzfbTime.length ? this.bzfbTime[0] : "",
        startTime:
          this.bzfbTime && this.bzfbTime.length ? this.bzfbTime[1] : "",
        timeType: this.bzfbRadio,
      };
      queryMjzzdfbTop10(param).then((res) => {
        const data = {
          ...res.data,
        };
        let arr = [];
        let colorS = [
          29.3, 10.3, 27.1, 34.4, 70.1, 69.7, 48.1, 70.6, 62.7, 89.6,
        ];
        for (let key in data) {
          const item = {
            name: this.getNameByKey(key),
            value: data[key],
          };
          arr.push(item);
        }
        const newArr = arr.sort((a, b) => b.value - a.value);
        for (let i = 0; i < newArr.length; i++) {
          newArr[i].color = colorS[i];
        }
        setTimeout(() => {
          this.options8[0].dataset.source = [
            ["score", "amount", "product"],
            ...newArr.map((item) => {
              return [item.color, item.value, item.name];
            }),
          ];
          this.$refs.options8.updateChart();
        });
      });
    },
    getNameByKey(key) {
      if (key == "zgwfxhzyfjmxsss") {
        return "中高危风险患者预防静脉血栓栓塞";
      } else if (key == "dzxnqxfzxgzhz") {
        return "短暂性脑缺血发作和相关的综合征";
      } else if (key == "zwmxqcx") {
        return "蛛网膜下腔出血";
      } else if (key == "nnncx") {
        return "脑内出血";
      } else if (key == "ngs") {
        return "脑梗死";
      } else if (key == "ncz") {
        return "脑卒中，未特指为出血或梗死";
      } else if (key == "rnqdmdbshxz") {
        return "入脑前动脉的闭塞或狭窄，未造成脑梗死";
      } else if (key == "dndmbshxz") {
        return "大脑动脉的闭塞和狭窄，未造成脑梗死";
      } else if (key == "qtnxgb_jxdml") {
        return "其它脑血管病、急性动脉瘤";
      } else if (key == "flyqtcdjbyqdnxgjh") {
        return "分类于他处的疾病引起的脑血管疾患";
      }
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  padding: 28px;
}
</style>
